<!--
 * @Author       : 哈喽 1599321283@qq.com
 * @Date         : 2025-03-16 21:35
 * @LastEditors  : 哈喽 1599321283@qq.com
 * @LastEditTime : 2025-03-16 22:52
 * @FilePath     : /练习/aaa/src/views/fortune/index.vue
 * @Description  : 算命功能首页
-->
<template>
  <div class="fortune-container">
    <!-- 头部区域 -->
    <div class="header-section glass-effect">
      <div class="stars-bg"></div>
      <h1 class="text-center text-gradient">天机罗盘</h1>
      <p class="text-center sub-title">探索命运的奥秘，寻找生活的答案</p>
    </div>

    <!-- 算命方式选择区域 -->
    <div class="fortune-methods">
      <div
        v-for="method in fortuneMethods"
        :key="method.id"
        class="method-card glass-effect"
        @click="goToMethod(method)"
      >
        <div class="method-icon">
          <van-icon :name="method.icon" size="32" />
        </div>
        <div class="method-info">
          <h3>{{ method.name }}</h3>
          <p>{{ method.desc }}</p>
        </div>
      </div>
    </div>

    <!-- 推荐区域 -->
    <div class="recommendation-section">
      <h2 class="section-title">今日推荐</h2>
       <div class="recommendation-card glass-effect">
        <div class="card-content">
          <h3>{{ todayRecommend.title }}</h3>
          <p>{{ todayRecommend.content }}</p>
        </div>
        <van-button
          type="primary"
          class="custom-btn"
          @click="goToMethod(todayRecommend.method)"
        >
          立即体验
        </van-button>
      </div>
    </div>

    <div class="fortune-cards">
      <!-- 塔罗牌卡片 -->
      <div class="fortune-card tarot-card" @click="goToTarot">
        <div class="card-icon">
          <div class="star-icon" />
        </div>
        <h3 class="card-title">塔罗占卜</h3>
        <p class="card-desc">揭示命运的奥秘，探索内心的真相</p>
        <div class="card-glow" />
      </div>

      <!-- 其他占卜卡片可以在这里添加 -->
    </div>
  </div>
</template>

<script setup >
import { reactive, ref } from "vue";
import {toast} from "uview-plus";
// import { useRouter } from "vue-router";

// const router = useRouter();

// 算命方式数据
const fortuneMethods = reactive([
  {
    id: 1,
    name: "八字命盘",
    desc: "基于生辰八字的命运分析",
    icon: "fire-o",
    path: "/fortune/bazi"
  },
  {
    id: 2,
    name: "塔罗牌",
    desc: "揭示命运与未来的塔罗解读",
    icon: "gem-o",
    path: "/fortune/tarot"
  },
  {
    id: 3,
    name: "星座运势",
    desc: "十二星座每日/每周/每月运势",
    icon: "star-o",
    path: "/fortune/horoscope"
  },
  {
    id: 4,
    name: "姓名测算",
    desc: "姓名对人生影响的深度解析",
    icon: "edit",
    path: "/fortune/name"
  }
]);

// 今日推荐
const todayRecommend = reactive({
  title: "事业运势分析",
  content: "特别适合职场人士，解析近期工作发展与机遇",
  method: {
    id: 1,
    path: "/fortune/bazi"
  }
});

// 跳转到对应算命方式
const goToMethod = (method) => {
  if(method.id==3||method.id==4){
    toast('熬夜开发中....')
  }else{
    uni.navigateTo({
      url: '/pages/views'+method.path })
  }

  // router.push(method.path);
};

// 跳转到塔罗牌页面
const goToTarot = () => {

  uni.navigateTo({
    url: '/pages/views/fortune/tarot' })

};
</script>

<style lang="less" scoped>
.fortune-container {
  min-height: 100vh;
  padding: 16px;
  background: linear-gradient(135deg, #1a103c 0%, #2d1b4e 100%);
  color: #fff;
}

.header-section {
  position: relative;
  padding: 24px 16px;
  margin-bottom: 24px;
  border-radius: 16px;
  overflow: hidden;

  .stars-bg {
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    background-image: url('data:image/svg+xml;utf8,<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 1000 1000" opacity="0.15"><circle cx="500" cy="500" r="1" fill="white"/></svg>');
    background-size: 100px 100px;
    z-index: -1;
  }
}

.text-gradient {
  font-size: 28px;
  font-weight: bold;
  margin-bottom: 8px;
  background: linear-gradient(90deg, #f5d0fe 0%, #c4b5fd 50%, #818cf8 100%);
  -webkit-background-clip: text;
  background-clip: text;
  -webkit-text-fill-color: transparent;
}

.sub-title {
  font-size: 14px;
  color: rgba(255, 255, 255, 0.8);
  margin-top: 0;
}

.fortune-methods {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: 16px;
  margin-bottom: 24px;
}

.method-card {
  display: flex;
  flex-direction: column;
  align-items: center;
  padding: 16px;
  border-radius: 12px;
  text-align: center;
  transition: transform 0.3s ease;

  &:active {
    transform: scale(0.98);
  }

  .method-icon {
    margin-bottom: 12px;
    padding: 16px;
    border-radius: 50%;
    background: rgba(255, 255, 255, 0.1);

    .van-icon {
      color: #c4b5fd;
    }
  }

  .method-info {
    h3 {
      font-size: 16px;
      margin: 0 0 4px;
    }

    p {
      font-size: 12px;
      margin: 0;
      color: rgba(255, 255, 255, 0.7);
    }
  }
}

.section-title {
  font-size: 18px;
  margin: 24px 0 16px;
  color: #c4b5fd;
}

.recommendation-card {
  padding: 16px;
  border-radius: 12px;
  margin-bottom: 24px;

  .card-content {
    margin-bottom: 16px;

    h3 {
      margin: 0 0 8px;
      font-size: 16px;
    }

    p {
      margin: 0;
      font-size: 14px;
      color: rgba(255, 255, 255, 0.7);
    }
  }

  .custom-btn {
    width: 100%;
    border-radius: 8px;
    background: linear-gradient(90deg, #6d28d9 0%, #8b5cf6 100%);
    border: none;
  }
}

/* 玻璃拟态效果 */
.glass-effect {
  background: rgba(255, 255, 255, 0.05);
  backdrop-filter: blur(10px);
  -webkit-backdrop-filter: blur(10px);
  border: 1px solid rgba(255, 255, 255, 0.1);
  box-shadow: 0 8px 32px rgba(0, 0, 0, 0.1);
}

.fortune-cards {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(280px, 1fr));
  gap: 20px;
  padding: 10px;
}

.fortune-card {
  background: rgba(255, 255, 255, 0.1);
  border-radius: 15px;
  padding: 25px 20px;
  backdrop-filter: blur(10px);
  position: relative;
  overflow: hidden;
  box-shadow: 0 10px 30px rgba(0, 0, 0, 0.2);
  display: flex;
  flex-direction: column;
  align-items: center;
  transition: all 0.3s ease;
  cursor: pointer;

  &:hover {
    transform: translateY(-5px);
    box-shadow: 0 15px 30px rgba(0, 0, 0, 0.3);

    .card-glow {
      opacity: 0.7;
    }
  }

  &.tarot-card {
    border: 1px solid rgba(138, 43, 226, 0.3);

    .card-icon {
      background: linear-gradient(45deg, #9c27b0, #673ab7);

      .star-icon {
        &::before {
          background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='white'%3E%3Cpath d='M12 17.27L18.18 21l-1.64-7.03L22 9.24l-7.19-.61L12 2 9.19 8.63 2 9.24l5.46 4.73L5.82 21z'/%3E%3C/svg%3E");
        }
      }
    }
  }
}

.card-icon {
  width: 60px;
  height: 60px;
  border-radius: 50%;
  margin-bottom: 15px;
  display: flex;
  align-items: center;
  justify-content: center;
  position: relative;

  .star-icon {
    width: 30px;
    height: 30px;
    position: relative;

    &::before {
      content: "";
      position: absolute;
      width: 100%;
      height: 100%;
      background-size: contain;
      background-repeat: no-repeat;
      background-position: center;
    }
  }
}

.card-title {
  font-size: 1.4rem;
  margin-bottom: 10px;
  font-weight: bold;
}

.card-desc {
  text-align: center;
  font-size: 0.9rem;
  margin-top: 0;
  color: rgba(255, 255, 255, 0.7);
}

.card-glow {
  position: absolute;
  inset: 0;
  background: radial-gradient(
    circle at 50% 0%,
    rgba(138, 43, 226, 0.4) 0%,
    transparent 70%
  );
  opacity: 0.4;
  transition: opacity 0.3s ease;
}

@media (max-width: 768px) {
  .fortune-cards {
    grid-template-columns: 1fr;
  }
}
</style>